<template>
  <view  class="telecast-container">
      <view  class="telecast-content home_container" v-for="(item, index) in broadCastList" :key="index">
        <view class="telecast-img">
          <image @click="toLive(item.broadcastLink)" class="img" :src="`https://www.worldintek.com:39011/yaolexue-service/${item.imageDto.compressLink}`" mode="widthFix"></image>
            
            <view class="telecast-status" :style="{ backgroundColor: item.beginStatus === 0 ? '#F63009' : '#1E92E8' }">
              <view class="telecast-text">
                {{item.beginStatus === 0 ? '未开始' : '直播中'}}
              </view>
            </view>
          <view class="telecast-people">
            {{item.appointmentNumber}}人参与
          </view>
        </view>
        <view class="telecast-title">
          {{item.title}}
        </view>
        <view class="telecast-time">
          直播时间:{{item.broadcastTime}}
        </view>
        <view @click="bespeakClick(item)" class="bespeak"
          :style="{borderColor: item.appointmentStatus === 0 ? '#F63009' : '#666666'}">
          <view class="bespeak-text" :style="{color: item.appointmentStatus === 0 ? '#F63009' : '#666666'}">{{item.appointmentStatus === 0 ? '立即预约' : '已预约'}}</view>
        </view>
        <view class="gap"></view>
      </view>
      <u-loadmore v-if='!showEmpty' :status="status" />
     <u-empty
   
     v-if="showEmpty"
             mode="list"
     >
     </u-empty>
  </view>
  
</template>

<script>
  export default {
    data() {
      return {
        showEmpty:false,
        broadCastList: [],
        total: 0,
        queryInfo: {
          page: 1,
          limit: 4
        },
        status: 'loadmore',
        isloading: false,
      }
    },
    onLoad() {
      this.getBroadcastList()
    },
    methods: {
      toLive(url){
        uni.navigateTo({
          url:'/pages/LiveView/LiveView?url='+url
        })
      },
      async getBroadcastList(cb) {
        this.isloading = true
        this.status = 'loading';
        const res = await this.$http.get('/yaolexue-service-portal/contentItem/pageContentItemBroadcast', this.queryInfo, {showLoading: true})
        this.isloading = false
        cb && cb()
       this.broadCastList = [...this.broadCastList, ...res.data.items]
        this.total = res.data.total
        if(this.total === 0)this.showEmpty=true
		
		this.status = this.broadCastList.length >= res.data.total ? 'nomore' : 'loading'
		this.queryInfo.page += 1;
      },
      async bespeakClick(item) {
        console.log(item, 'item');
         const res = await this.$http.post(`/yaolexue-service-portal/home/broadcastAppointment/${item.id}`)
         if(res.code == 200) {
           this.disabled = true
           uni.showToast({
             title: '预约成功!',
             icon: 'none'
           })
           // 更新广播列表中的预约状态
        item.appointmentStatus = res.data.appointmentStatus;
        // 更新预约人数
        item.appointmentNumber += 1
         this.getBroadcastList()
         } else {
           this.disabled = true
           uni.showToast({
             title: '已预约，请勿重复!',
             icon: 'none'
           })
         }
       },
    },
    onReachBottom() {
      if (this.isloading) return;
      this.status != 'nomore' && this.getBroadcastList()
    }

  }
</script>


<style lang="scss">
  .u-empty{
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  }
  .telecast-container {
    .telecast-content {
      margin-bottom: 23rpx;
      background-color: #FFFFFF;
      border-radius: 21rpx;
      box-sizing: content-box;
      position: relative;
      overflow: hidden;
      .telecast-img {
        width: 689rpx;
        height: 308rpx;
        // background: #E1E1E1;
        border-radius: 21rpx;
        position: relative;
        margin-top: 32rpx;
        overflow: hidden;
        .img {
          width: 100%;
          height: 100%;
          border-radius: 23rpx;
        }

        
        .telecast-status {
          width: 100rpx;
          height: 46rpx;
       
          border-radius: 22rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          position: absolute;
          left: 5%;
          top: 7%;
          .telecast-text {
            width: auto;
            height: auto;
            font-size: 24rpx;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #FFFEFE;
          }
        }
        .telecast-people {
          position: absolute;
          top: 20rpx;
          right: 23rpx;
          width: fit-content;
          height: 23rpx;
          font-size: 24rpx;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #FFFEFE;
        }

      }

      .telecast-title {
        margin: 14rpx 0 13rpx 0;
        width: fit-content;
        font-size: 28rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #333333;

      }

      .telecast-time {
        padding-bottom: 31rpx;
        width: fit-content;
        font-size: 24rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #999999;
      }

      .bespeak {
        position: absolute;
        right: 5%;
        bottom: 37rpx;
        width: 150rpx;
        height: 50rpx;
        border: 1px solid #F63009;
        border-radius: 25rpx;
        display: flex;
        align-items: center;
        justify-content: center;

        .bespeak-text {
          width: fit-content;
          height: fit-content;

          font-size: 24rpx;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #F63009;
        }
      }

      .gap {
        width: 750rpx;
        height: 20rpx;
        background: #FAFAFA;
        margin-left: -29rpx;
      }

    }

  
    
  }
</style>